


<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1">
        <div v-for="item in list" :key="item.id">
          <p @click="searchList(item)">{{item.name}}</p>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>

    <!-- 地图要啥图像就点击啥，比如是就点击圆型 -->
    <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="10">
      <div v-for="(v, i) in list" :key="i">
        <bm-circle
          :center="{ lng: v.longitude, lat: v.latitude }"
          :radius="circlePath.radius"
          stroke-color="#ccc"
          :stroke-opacity="0.5"
          :labelStyle="{ background: 'red', border: 'none' }"
          :stroke-weight="2"
          fillColor="#000"
          @lineupdate="updateCirclePath"
        ></bm-circle>
        <bm-label
          :content="v.name"
          :position="{ lng: v.longitude, lat: v.latitude }"
          :labelStyle="{ color: 'red', fontSize: '14px' }"
          title="Hover me"
        />
        <!-- <bm-label
            :content="v.name"
            :position="{ lng: 116.404, lat: 39.915 }"
            :labelStyle="{ color: 'red', fontSize: '24px' }"
            title="Hover me"
        />-->
      </div>
    </baidu-map>
  </div>
</template>
<script>
import { getmap } from "../api/user.js";
export default {
  data() {
    return {
      circlePath: {
        center: {
          // 有这个才有圆图形
          lng: 116.404,
          lat: 39.915
        },
        // 圆的大小半径宽度
        radius: 1000
      },
      cityList: [],
      value1: 0,
      value2: "a",
      level: 1,
      value3: "e",
      list: [],
      value4: 1,
      option1: [
        { text: "区域", value: 0 },
        { text: "西湖区", value: 1 },
        { text: "奉贤区", value: 2 }
      ],
      option2: [
        { text: "价格", value: "a" },
        { text: "不限", value: "b" },
        { text: "5千以下", value: "c" },
        { text: "5千-1万", value: "d" },
        { text: "1万-2万", value: "e" },
        { text: "2万以上", value: "f" }
      ],
      option3: [
        { text: "类型", value: "e" },
        { text: "小户型", value: "f" },
        { text: "大户型", value: "g" }
      ],
      option4: [
        { text: "更多", value: 1 },
        { text: "好评排序", value: 2 },
        { text: "销量排序", value: 3 }
      ]
    };
  },
  created() {
    this.sd();
  },
  methods: {
    searchList(){
      
    },
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
      this.circlePath.radius = e.target.getRadius();
    },
    // 地图发生改变时触发此事件
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
    sd() {
      getmap({ level: this.level }).then(res => {
        this.list = res.data; //list渲染省
      });
    }
  }
};
</script>
<style lang="scss">
// 写了这个宽高100%才有图片
.map {
  width: 100%;
  height: 1200%;
}
</style>